<!--
 * @Author: your name
 * @Date: 2021-09-10 00:05:42
 * @LastEditTime: 2021-09-19 11:52:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \more-money\src\views\money.vue
-->
<template>
    <div class="money-container">
        <Layout>
            <div class="tabs flex flex-center fs-14">
                <div class="tabs-pane flex flex-column" :class="{selected:tabs==='spending'}" @click="changeTabs('spending')">
                    <Icon iconName="spending" />
                    支出
                </div>
                <div class="tabs-pane flex flex-column" :class="{selected:tabs==='income'}" @click="changeTabs('income')">
                    <Icon iconName="income" />
                    收入
                </div>
            </div>
            <TagList :list.sync="typesList[tabs]" @change="onSelectTag" />
            <NumberPad @change="getAmout"  />
        </Layout>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import TagList from '@/components/money/TagList.vue';
import NumberPad from '@/components/money/numberPad.vue';
import RecordListModel from '@/models/RecordsListModel';

interface TypesList  {
    income: Tag[];
    spending: Tag[];
}

@Component({
    components:{
        TagList,
        NumberPad
    } 
})
export default class Money extends Vue{
    private recordList: RecordItem[] = [];
    private record: RecordItem = {
        type:'spending',
        tag:'',
        remark:'',
        amount:0,
        createTime:new Date(),
    } 
    private tabs = 'spending';
    private typesList: TypesList = {
        spending:[
            {name:'服饰',value:'clothes'},
            {name:'餐饮',value:'diet'},
            {name:'家居',value:'household'},
            {name:'交通',value:'traffic'},
            {name:'爱宠',value:'pet'},
            {name:'零食',value:'snacks'},
            {name:'娱乐',value:'entertainment'},
            {name:'旅行',value:'travels'},
            {name:'购物',value:'shopping'},
            {name:'添加',value:'add'},
        ],
        income: [
            {name:'工资',value:'salary'},
            {name:'兼职',value:'part-time'},
            {name:'补贴',value:'subsidies'},
            {name:'投资',value:'investment'},
            {name:'礼品',value:'gift'},
            {name:'博彩',value:'lottery'},
            {name:'添加',value:'add'},
        ]
    };
    created(){
        this.recordList = RecordListModel.getList();
    }
    private initRecord(){
        this.record = {
            type:'spending',
            tag:'',
            remark:'',
            amount:0,
            createTime:new Date(),
        };
    }
    private changeTabs(value: string){
        this.tabs = value;
        this.record.type = value;
        this.record.tag = '';
    }
    private onSelectTag(currentType: string){
        this.record.tag = currentType;
    }
    private getAmout(result: any){
        this.record.remark = result.remark;
        this.record.amount = parseFloat(result.amount);
        this.recordList.push({...this.record});
        RecordListModel.updateList(this.recordList);
    }
 }
</script>

<style lang="scss" scoped>
@import '@/assets/scss/config.scss';
.tabs{
    width: 100%;
    line-height: 20px;
    &-pane{
        padding: 4px 0;
        width: 50%;
        position: relative;
        background:linear-gradient(0deg, #fed943 0%, #ffe57c 100%);
        ::v-deep .icon{
            font-size: 1.6rem;
        }
        &.selected::after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #333333;
        }
    }
}
</style>